<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title class="title"></title>
    <link rel="stylesheet" href="/favicon.ico">
    <link rel="stylesheet" href="/libs/font/iconfont.css">
    <link rel="stylesheet" href="/libs/exzoom/jquery.exzoom.css">
    <link rel="stylesheet" href="/libs/bootstrap/css/bootstrap-responsive.min.css">
    <link rel="stylesheet" href="/libs/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/commodityDetails.css">
</head>
<body>
    <header></header>
    <div class="search" style="background-color: #f3f3f3;">
        <div class="container">
            <ul class="breadcrumb">
                <li><a href="/index.html">首页</a> <span class="divider">/</span></li>
                <li><a href="/html/list.html?id=5">手机</a> <span class="divider">/</span></li>
                <li class="active title"></li>
            </ul>
        </div>
    </div>
    <div class="product clearfix container">
        <!-- 左边区域商品图片 -->
        <div class="left exzoom" id="exzoom">
            <div class="exzoom_img_box">
                <ul class='exzoom_img_ul' id="imgList">                   
                </ul>
                <!-- 轮播图 -->
                <script type="text/html" id = "imgListTemplate">
                    {{each photo item}}
                    <li><img src="{{item.url}}"></li>
                    {{/each}}
                </script>
            </div>
            <!--缩略图导航-->
            <div class="exzoom_nav"></div>
            <!--控制按钮-->
            <p class="exzoom_btn">
                <a href="javascript:void(0);" class="exzoom_prev_btn"> &lt; </a>
                <a href="javascript:void(0);" class="exzoom_next_btn"> &gt; </a>
            </p>               
        </div>
        <!-- 右边区域商品详情页 -->
        <div class="right" id="information">
        </div>
        <script type="text/html" id="informationTemplate">
            <h3>{{title}}</h3>
            <p>{{qunTitle}}</p>
            <div class="good-info">
                <div class="good-info-top">
                    <label>价格</label>
                    <span>￥{{price}}</span>
                </div>
                <div class="good-info-bottom">
                    <label>促销</label>
                    {{if couponValue}}
                    <span>{{couponValue}}</span> {{expireMsg}}
                    {{else}}
                    <span>{{couponStatus}}</span>
                    {{/if}}
                </div>               
            </div>
            <div class="good-pull">
                <div class="good-pull-top">
                    <label>服务申明</label>
                    <span>{{accessoryHints.join(" ")}}</span>
                </div>
                <div class="good-pull-bottom">
                    <label>商品编码</label>
                    <span>{{commodityId}}</span>
                </div>               
            </div>
            <div class="good-choose">
                <div class="good-choose-list">
                    <label>选择颜色</label>
                    <ul>
                        <li>陶瓷黑</li>
                        <li>陶瓷白</li>
                    </ul>
                </div>
                <div class="good-choose-list1">
                    <label>选择版本</label>
                    <ul>
                        <li>5G全网通 8GB+256GB 珍藏版</li>
                        <li>5G全网通 12GB+512GB 典藏版</li>
                    </ul>
                </div> 
                <div class="good-choose-list2">
                    <label>选择套餐</label>
                    <ul>
                        <li>官方标配</li>
                        <li>套餐一</li>
                        <li>套餐二</li>
                    </ul>
                </div>
                <div class="chooses">
                    <p>已选择商品：
                        <span id = "span1"></span>
                        <span id = "span2"></span>
                        <span id = "span3"></span>
                    </p>
                </div>
            </div>
            <div class="join-cart">
                <div id="changeNum" class="changeNum">
                    <input type="text" value="1" id="numCount">
                    <button class="addBtn">+</button>
                    <button class="subBtn">-</button>
                </div>
                <button id="okBtn" class="okBtn">加入购物车</button>
                <button id="okBuy" class="okBuy"><a href="/html/cart.html">立即购买</a></button>
            </div>
        </script>
        <a class="iconfont icon-gouwucheman" href="/html/cart.html">
            <span id="count"></span>
        </a>
    </div>
    <div class="container">
        <ul class="details">
            <li>商品详情</li>
            <li>规格参数</li>
            <li>包装与售后</li>
            <li>用户评价（<span id="reviewCount" style="color: red;">0</span>）</li>
        </ul>
        <ul class="imgInfo" id="imgInfo">
            <li><img src="" alt=""></li>
        </ul>
        <script type="text/html" id="imgInfoTemplate">
            {{each descContentList pic}}
            {{if pic.type === 1}}
            <li><img src="{{pic.photo.url}}" alt=""></li>
            {{else}}
            <li><p>{{pic.text}}</p></li>
            {{/if}}
            {{/each}}
        </script>
    </div>
    <footer class="container footer"></footer>
    <script src="/libs/require/require.min.js" data-main="/js/commodityDetails"></script>
</body>
</html>